<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <title>我的购物车-小米商城</title>
    <meta name="viewport" content="width=1226">

    <link rel="stylesheet" href="css/base.min.css">
    <link rel="stylesheet" type="text/css" href="css/cart.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        .addbox{position:fixed;right:0;top:0;bottom:0;background:rgba(255,255,255,0.98);width:640px;z-index: 100;padding:0px;box-shadow: 0 0 1em #333;}
        .addbox p{padding:0px;}
        .addbox p input{width:100%;border-radius:6px;height:30px;line-height: 36px;border:1px solid #eee;outline:none;text-indent: 1em;}
        .maskover{position:fixed;right:0;left:0;bottom: 0;top: 0;background:#000;opacity: 0.3;z-index: 99}
        .red{background:#fff}
        .green{background:#eee;}
    </style>
</head>

<body>
<div class="site-header site-mini-header">
    <div class="container">
        <div class="header-logo">
            <a class="logo ir" href="//www.mi.com/index.html" title="小米官网" data-stat-id="1de2e5c522d7b543"
               onclick="_msq.push(['trackEvent', '5df97b551662ffe7-1de2e5c522d7b543', '//www.mi.com/index.html', 'pcpid', '']);">小米官网</a>
        </div>
        <div class="header-title has-more" id="J_miniHeaderTitle">
            <h2>我的购物车</h2>
            <p>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</p>
        </div>
        <div class="topbar-info" id="J_userInfo"><span class="user"><a rel="nofollow" class="user-name"
                                                                       href="//my.mi.com/portal" target="_blank"><span
                class="name">108112069</span><i class="iconfont"></i></a>
			<ul class="user-menu">
				<li>
					<a rel="nofollow" href="//my.mi.com/portal" target="_blank">个人中心</a>
				</li>
				<li>
					<a rel="nofollow" href="//order.mi.com/user/comment" target="_blank">评价晒单</a>
				</li>
				<li>
					<a rel="nofollow" href="//order.mi.com/user/favorite" target="_blank">我的喜欢</a>
				</li>
				<li>
					<a rel="nofollow" href="//account.xiaomi.com/" target="_blank">小米帐号</a>
				</li>
				<li>
					<a rel="nofollow" href="//order.mi.com/site/logout">退出登录</a>
				</li>
			</ul>
			</span><span class="sep">|</span>
            <a rel="nofollow" class="link link-order" href="//static.mi.com/order/" target="_blank">我的订单</a>
        </div>
    </div>
</div>

<div class="page-main">
    <div class="container" id="app">
        <div class="cart-empty hide" id="J_cartEmpty">
            <h2>您的购物车还是空的！</h2>
            <p class="login-desc">登录后将显示您之前加入的商品</p>
            <a href="javascript:void(0);" class="btn btn-primary btn-login" id="J_loginBtn"
               data-stat-id="6ab7b2b79aa79ef3"
               onclick="_msq.push(['trackEvent', '5df97b551662ffe7-6ab7b2b79aa79ef3', 'javascript:void0', 'pcpid', '']);">立即登录</a>
            <a href="//list.mi.com/0" class="btn btn-primary btn-shoping J_goShoping" data-stat-id="f7e2e8ff3af3bfec"
               onclick="_msq.push(['trackEvent', '5df97b551662ffe7-f7e2e8ff3af3bfec', '//list.mi.com/0', 'pcpid', '']);">马上去购物</a>
        </div>
        <div id="J_cartBox" class="">
            <div class="addonitems-tips J_addonitemsTips">小米发货商品满150元免运费,还需<span>101<span>元<a class="J_getaddItems"
                                                                                              href="javascript:void(0);">去凑单 &gt;</a></span></span>
            </div>
            <div class="cart-goods-list">
                <div class="list-head clearfix">
                    <div class="col col-check"><i class="iconfont icon-checkbox"
                                                  id="J_selectAll" :class="{'icon-checkbox-selected':mainFlag}" @click="selectAll">√</i>全选
                    </div>
                    <div class="col col-img">&nbsp;</div>
                    <div class="col col-name">商品名称</div>
                    <div class="col col-price">单价</div>
                    <div class="col col-num">数量</div>
                    <div class="col col-total">小计</div>
                    <div class="col col-action">操作</div>
                </div>
                <div class="list-body" id="J_cartListBody">
<!--                    <div class="item-box" v-for="(cart,index) in results"  :class="{'red':index%2==0,'green':index%2==1}">-->
                    <div class="item-box" v-if="cart.isShow" v-for="(cart,index) in results"  :class="[index%2==0?'red':'green']">
                        <div class="item-table J_cartGoods"
                             data-info="{ commodity_id:'1181300018', gettype:'buy', itemid:'2181300017_0_buy', num:'1'} ">
                            <div class="item-row clearfix">
                                <div class="col  col-check"><i
                                        class="iconfont icon-checkbox J_itemCheckbox"
                                        data-itemid="2181300017_0_buy" data-status="1" :class="{'icon-checkbox-selected':cart.checked}" @click="checkItem(index)">√</i></div>
                                <div class="col col-img">
                                    <a href="//item.mi.com/1181300018.html" target="_blank"> <img alt=""
                                                                                                  :src="cart.img"
                                                                                                  width="80"
                                                                                                  height="80"> </a>
                                </div>
                                <div class="col col-name">
                                    <div class="tags"></div>
                                    <div class="tags"></div>
                                    <h3 class="name"><a href="//item.mi.com/1181300018.html" target="_blank">
                                        {{cart.title}} </a></h3></div>
                                <div class="col col-price"><span class="price">{{cart.price | money('￥')}}</span>元 <br>{{cart.createTime | dateFmt('yyyy-MM-dd')}}
                                    <p class="pre-info"></p>
                                </div>
                                <div class="col col-num">
                                    <div class="change-goods-num clearfix J_changeGoodsNum">
                                        <a href="javascript:void(0)" @click="minusItem(index)" class="J_minus"><i
                                                class="iconfont"></i></a>
                                        <input tyep="text" name="2181300017_0_buy" v-on:input="inputChange(index)" v-model="cart.num" data-num="1"
                                               data-buylimit="1" data-price="1" autocomplete="off"
                                               class="goods-num J_goodsNum">
                                        <a href="javascript:void(0)" @click="plusItem(index)" data-store="10"
                                           class="J_plus "><i
                                                class="iconfont "></i></a></div>
                                </div>
                                <div class="col col-total "><span class="price(index)">{{cart.price * cart.num | rand(2)}}</span>元
                                    <p class="pre-info "></p>
                                </div>
                                <div class="col col-action "><a id="2181300017_0_buy " data-msg="确定删除吗？ "
                                                                href="javascript:void(0); " title="删除 "
                                                                class="del J_delGoods "><i class="iconfont " @click="delItem(cart.id,index)"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 加价购 -->
            <div class="raise-buy-box " id="J_raiseBuyBox "></div>

            <div class="cart-bar clearfix " id="J_cartBar ">
                <div class="section-left ">
                    <a href="//list.mi.com/0 " class="back-shopping J_goShoping " data-stat-id="b16361b4c5491b6d "
                       onclick="_msq.push([ 'trackEvent', '5df97b551662ffe7-b16361b4c5491b6d', '#', 'pcpid', '']); ">继续购物</a>
                    <span class="cart-total ">共 <i id="J_cartTotalNum">{{results.length}}</i> 件商品，已选择 <i id="J_selTotalNum">{{checkedSize}}</i> 件</span>
                    <span class="cart-coudan hide " id="J_coudanTip ">
				，还需 <i id="J_postFreeBalance ">101.00</i> 元即可免邮费  <a href="javascript:void(0); " id="J_showCoudan "
                                                                     data-stat-id="cfc8337d6cbfdef7 "
                                                                     onclick="_msq.push([ 'trackEvent', '5df97b551662ffe7-cfc8337d6cbfdef7', 'javascript:void0', 'pcpid', '']); ">立即凑单</a>
			</span>
                </div>
                <span class="activity-money hide ">
			活动优惠：减 <i id="J_cartActivityMoney ">0</i> 元
		</span>
                <span class="total-price ">
			合计：<em id="J_cartTotalPrice">{{totalPrices | rand(2) | money('$')}}</em>元
		</span>
                <a href="javascript:void(0); " class="btn btn-a btn btn-primary " id="J_goCheckout "
                   data-stat-id="9bd56b7232f4ef1a "
                   onclick="_msq.push([ 'trackEvent', '5df97b551662ffe7-9bd56b7232f4ef1a', 'javascript:void0', 'pcpid', '']); ">去结算</a>

                <div class="no-select-tip hide " id="J_noSelectTip ">
                    请勾选需要结算的商品
                    <i class="arrow arrow-a "></i>
                    <i class="arrow arrow-b "></i>
                </div>
            </div>
        </div>

        <button @click="openAddDialog">打开添加购物车</button>
        <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
        <div class="addbox" v-show="openFlag">
            <h1>添加购物车数据</h1>
            <form>
                <p>商品名称：<input type="text" v-model="shopcart.title"></p>
                <p>商品图片：<input type="text" v-model="shopcart.img"></p>
                <p>商品价格：<input type="text" v-model="shopcart.price"></p>
                <p>商品数量：<input type="text" v-model="shopcart.totalCount"></p>
                <p>商品地址：<input type="text" v-model="shopcart.url"></p>
                <p>商品描述：<input type="text" v-model="shopcart.description"></p>
                <p><button v-on:click.prevent="saveShopCart">添加到购物车</button></p>
                <p><button @click.prevent="saveShopCart">@添加到购物车</button></p>
            </form>
        </div>
        </transition>
        <div class="maskover" @click="hideAddDialog" v-show="openFlag"></div>

        <div class="cart-recommend hide " id="J_historyRecommend "></div>

        <script src="js/vue.min.js"></script>
        <script src="js/axios.min.js"></script>
        <script src="js/filter.js"></script>
        <script src="js/shopcart.js"></script>
    </div>
</div>
</body>
</html>